<template>
	<div class="app-container">
		<div class="details">
			<div class="detailsDiv">
				<div class="dialogDom" v-if="detailsInfo.dataType != 'comment' && detailsInfo.dataType != 'commentReply'">
					<div><span>作者昵称:</span>{{ detailsInfo.publisherName }}</div>
					<div><span>作者ID:</span>{{ detailsInfo.publisherId }}</div>
					<div><span>作者实名状态:</span>{{ detailsInfo.realStatus == null ? '未认证' : detailsInfo.realStatus }}</div>
					<div><span>发布IP:</span>{{ detailsInfo.publisherIp }}</div>
					<div><span>发布时间: </span>{{ detailsInfo.publishTime }}</div>
				</div>
			</div>
			<div class="detailsDiv">
				<div class="dialogDom">
					<div><span>发布人手机号:</span> {{ detailsInfo.publisherMobile }}</div>
					<div><span>评论点赞数:</span>{{ detailsInfo.likeCount }}</div>
					<div><span>评论转发数:</span> {{ detailsInfo.shareCount }}</div>
					<div><span>举报数:</span> {{ detailsInfo.reportCount }}</div>
				</div>
			</div>

			<div class="detailsDiv">
				<div>
					<div class="dialogDiv">
						<span>评论ID:</span>
						<div class="dialogDivCon">{{ detailsInfo.commentId }}</div>
					</div>
					<div class="dialogDiv">
						<span>评论标题:</span>
						<div class="dialogDivCon">{{ detailsInfo.title }}</div>
					</div>
					<div class="dialogDiv">
						<span>评论链接:</span>
						<div class="dialogDivCon">
							<a :href="detailsInfo.link || detailsInfo.playUrl" target="_blank">{{ detailsInfo.link ||
								detailsInfo.playUrl }}</a>
						</div>
					</div>
					<div class="dialogDiv" v-if="detailsInfo.dataType == 'article'">
						<span>内容:</span>
						<div class="dialogDivCon" v-html="detailsInfo.content"></div>
					</div>
					<div class="dialogDiv" v-if="detailsInfo.dataType == 'comment' || detailsInfo.dataType == 'commentReply'">
						<span>评论内容:</span>
						<div class="dialogDivCon" v-html="detailsInfo.commentContent"></div>
					</div>
				</div>
			</div>
			<!-- <div class="detailsDiv">
				<div><span>举报用户列表:</span></div>
				<el-table :data="tableData" border style="width: 100%" class="elTable" @selection-change="handleSelectionChange"
					@sort-change="sortChangeHandle">
					<el-table-column align="center" type="selection" width="40" />
					<el-table-column label="序号" type="index" align="center" width="80"> </el-table-column>
					<el-table-column prop="reporterId" label="ID" />
					<el-table-column prop="reporterName" label="用户名称" />
					<el-table-column prop="reportTitle" label="举报内容标题" />
					<el-table-column prop="reportReason" label="举报原因描述" />
					<el-table-column prop="reportTime" label="举报时间" />
					<el-table-column prop="status" label="状态">
						<template #default="scope">
							{{ scope.row.status == 'pending' ? '待处理' : scope.row.status == 'resolved' ? '已处理' : '已拒绝' }}
						</template>
</el-table-column>
</el-table>
<div class="dialog-footer" v-if="reportListType">
	<el-button type="primary" @click="dialogFormVisible = true">审核 </el-button>
</div>
</div> -->
		</div>
		<el-dialog v-model="dialogFormVisible" title="审核" width="500">
			<el-form :model="form">
				<el-form-item label="审核状态" :label-width="formLabelWidth">
					<el-select v-model="form.status" placeholder="全部状态">
						<el-option v-for="item in formAuditStatus" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="风险等级" :label-width="formLabelWidth">
					<el-select v-model="form.riskLevel" placeholder="全部类型">
						<el-option v-for="item in ViolationLevel" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="审核结果" :label-width="formLabelWidth">
					<el-select v-model="form.resolution" placeholder="全部">
						<el-option v-for="item in auditResultList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="结果说明" :label-width="formLabelWidth">
					<el-input type="textarea" v-model="form.auditDesc" :rows="3" placeholder="请输入审核说明" />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取消</el-button>
					<el-button type="primary" @click="reportBatchAudit()">确定 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { getCommentDetail, reportList, reportBatchAudit,getCommentReplyDetail } from '/@/api/admin/content';
import { useMessage } from '/@/hooks/message';
import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.min.css';
import moment from 'moment';
export default {
	name: 'ReportreDetails',
	data() {
		return {
			monitoringType: [
				{
					value: '',
					label: '全部类型',
				},
				{
					value: 'audit_label_pornography',
					label: '涉黄',
				},
				{
					value: 'audit_label_politics',
					label: '涉政',
				},
				{
					value: 'audit_label_drugs',
					label: '涉毒',
				},
				{
					value: 'audit_label_gambling',
					label: '涉赌',
				},
				{
					value: 'audit_label_religion',
					label: '宗教',
				},
				{
					value: 'audit_label_superstition',
					label: '迷信',
				},
				{
					value: 'audit_label_terrorism',
					label: '涉恐',
				},
				{
					value: 'audit_label_other',
					label: '其他',
				},
				{
					value: 'audit_label_none',
					label: '无风险',
				},
			],
			auditResultList: [
				{
					value: '',
					label: '全部类型',
				},
				{
					value: 'pass',
					label: '无违法信息',
				},
				{
					value: 'illegal',
					label: '涉嫌违法信息',
				},
				{
					value: 'audit_result',
					label: '持续监控信息',
				},
			],
			formAuditStatus: [
				{
					value: 'resolved',
					label: '已审核',
				},
				{
					value: 'rejected',
					label: '未通过',
				},
			],
			ViolationLevel: [
				{
					value: '',
					label: '全部类型',
				},
				{
					value: 'high',
					label: '高风险',
				},
				{
					value: 'medium',
					label: '中风险',
				},
				{
					value: 'low',
					label: '低风险',
				},
				{
					value: 'none',
					label: '无风险',
				},
			],
			dialogFormVisible: false,
			outerVisible: false,
			options: [],
			form: {},
			// 遮罩层
			loading: true,
			// 总条数
			total: 0,
			// 表格数据
			list: [],
			pageNum: 1,
			pageSize: 10,
			// 查询参数
			detailsInfo: {},
			tableData: [],
			queryParams: {
				ipaddr: undefined,
				userName: undefined,
			},
			reportListType: false,
		};
	},

	created() {
		if (this.$route.query.reportedType == 'comment') {
			this.getCommentDetail();
		} else {
			this.getCommentReplyDetail();
		}
	},
	mounted() {},
	methods: {
		formatTimestamp(timestamp) {
			return moment(timestamp).format('YYYY-MM-DD hh:ss:mm'); // 注意：同上，如果是秒则需要乘以1000
		},
		getCommentDetail() {
			let data = {
				id: this.$route.query.id,
			};
			getCommentDetail(data).then((res) => {
				this.detailsInfo = res.data;
				this.reportList();
			});
		},
		getCommentReplyDetail() {
			let data = {
				id: this.$route.query.id,
			};
			getCommentReplyDetail(data).then((res) => {
				this.detailsInfo = res.data;
				this.reportList();
			});
		},
		reportList() {
			let data = {
				// id: this.$route.query.id,
				reportedId: this.$route.query.id,
			};
			reportList(data).then((res) => {
				this.tableData = res.data.records;
				for (let item of this.tableData) {
					if (item.status == 'pending') {
						this.reportListType = true;
						return;
					} else {
						this.reportListType = false;
					}
				}
			});
		},
		reportBatchAudit() {
			this.form.reportedId = this.$route.query.id;
			reportBatchAudit(this.form).then((res) => {
				useMessage().success(res.msg);
				this.reportList();
				this.dialogFormVisible = false;
			});
		},
		handleSelectionChange(e) {
			console.log(e);
		},
		sortChangeHandle(e) {},
	},
};
</script>
<style lang="scss" scoped>
.details {
	font-size: 14px;
	color: #666;
	width: 98%;
	margin: 1% auto;
}

.detailsDiv {
	border-bottom: 1px solid #e3e3e3;
	margin-bottom: 0.5%;
	padding: 10px 20px;
	background-color: #fff;
	font-size: 16px;
}

.dialogDom {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	margin: 15px 0;
	color: #999;
	flex-wrap: wrap;

	span {
		color: #333;
		margin-right: 10px;
	}

	>div {
		width: 20%;
		min-width: 200px;
	}
}

.dialogDiv {
	margin: 15px 0;
	color: #999;
	margin: 15px 0;
	color: #999;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;

	.dialogDivCon {
		width: 70%;

		a {
			text-decoration: underline;
		}
	}

	span {
		color: #333;
		margin-right: 10px;
	}
}

.imgPics {
	width: 18%;
	display: inline-block;
	margin: 1%;

	img {
		width: 100%;
		display: block;
	}
}

.elTable {
	margin: 20px 0;
	margin-top: 10px;
}

.dialog-footer {
	text-align: center;
}
</style>
